import React from 'react';
import { Form, Input, Button, Checkbox, message } from 'antd';
import { loginInterface } from '../services/login'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { history } from 'umi'
import './login.less'

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
const Login = () => {
  const onFinish = async (values) => {
    console.log(values)
    const res = await loginInterface(values);
    if (res.code === 200) {
      message.success(res.message);
      history.push('/welcome');
    } else {
      message.error(res.message);
    }
  };
  return (
    <div className="login-body">
      <div className="login-img"></div>
      <div className="login-namepwd">
        <div className="namepwd-content">
          <Form
            name="normal_login"
            className="login-form"
            {...layout}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <h2 style={{ marginTop: 30 }}>秦学管理系统</h2>
            <Form.Item
              name="userAccount"
              rules={[
                {
                  required: true,
                  message: 'Please input your Username!',
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="userPwd"
              rules={[
                {
                  required: true,
                  message: 'Please input your Password!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
            </Form.Item>

            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};
export default Login;
